@import '../utils/mixin.scss';

page {
	background: #f7f7fc;
}

// 栏位详情
.sp-field {
	background: #f7f7fc;
	padding-bottom: 150px;
	box-sizing: border-box;
	
	&__ {
		
		&image {
			image {
				display: block;
				@include size(100%, 480rpx);
			}
		}
		
		&info {
			position: relative;
			z-index: 11;
			width: 700rpx;
			padding: 30rpx;
			box-sizing: border-box;
			// background: #fff;
			// box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			// margin: -50rpx auto 25rpx;
			border-radius: 20rpx;
			
			&- {
				
				&name {
					@include font(28rpx, 1, #55557A, left);
				}	
				
				&desc {
					@include font(24rpx, 1, #8B8BAD, left);
					margin: 20rpx 0;
				}
				
				&person {
					margin-bottom: 30rpx;
					@include font(24rpx, 1, #8B8BAD, left);
				}
				
				&tags {
					display: flex;
					align-items: center;
				}
			}
		}
		
		&control {
			position: fixed;
			@include flex();
			@include size(100%, 200rpx);
			left: 0;
			bottom: 0;
			padding: 0 50rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			
			&- {
				
				&item {
					@include size(120rpx, 120rpx);
					border: 1rpx solid #c9c9c9;
					border-radius: 50%;
					overflow: hidden;
					
					image {
						display: block;
						@include size(50rpx, 50rpx);
						margin: 20rpx auto 10rpx;
					}
					
					text {
						display: block;
						@include font(24rpx, 1, #8B8BAD);
					}
					
					&.active {
						border-color: #5ac725;
						background-color: #5ac725;
						
						text {
							color: #fff;
						}
					}
				}
			}
		}
	}
}

// 栋舍
.sp-room {
	background: #f7f7fc;
	padding-top: 20rpx;
	padding-bottom: 120rpx;
	box-sizing: border-box;
	
	&__ {
		
		&back {
			@include absolute(0, null, null, 0);
			@include size(100%, 600rpx);
			background: linear-gradient( 180deg, #846BFE 0%, rgba(216,216,216,0) 100%);
		}
		
		&map {
			position: relative;
			z-index: 2;
			width: 688rpx;
			margin-bottom: 20rpx;
			background: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			box-sizing: border-box;
			margin: 0 auto;
			padding: 20rpx 30rpx 40rpx;
			
			&- {
				
				&title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 60rpx;
					margin-bottom: 16rpx;
				}
				
				&content {
					padding: 14rpx 20rpx 0;
					border: 2rpx solid #D7D7D7;
					border-radius: 16rpx;
					overflow: hidden;
					
					& > label {
						display: block;
						@include font(24rpx, 60rpx, #333);
					}
				}
			}
		}
		
		&field {}
		
		&logs {
			position: relative;
			z-index: 1;
			@include size(686rpx, auto, 16rpx);
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			margin: 0 auto;
			padding: 22rpx 30rpx;
			box-sizing: border-box;
			background: #fff;
			
			&- {
				
				&title {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 60rpx;
					margin-bottom: 22rpx;
				}
				
				&tabs {
					@include flex(center, null);
					margin-left: 40rpx;
					
					text {
						display: block;
						font-size: 28rpx;
						padding: 2rpx 20rpx;
						transition: all .3s;
						
						&.active {
							color: #795EFF;
						}
					}
				}
				
				&time {
					font-size: 24rpx;
					padding-right: 20rpx;
					color: #666;
				}
				
				&list {
					@include flex();
					flex-wrap: wrap;
				}
				
				&item {
					position: relative;
					@include size(304rpx, 502rpx, 16rpx);
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.1);
					overflow: hidden;
					margin-top: 24rpx;
					overflow: hidden;
					
					.u-tag-wrapper {
						position: absolute !important;
						top: 0;
						right: 0;
					}
					
				}
				
				&pics {
					position: relative;
					
					image {
						@include size(100%, 404rpx);
					}
				}
				
				&info {
					flex: 1;
					height: 98rpx;
					padding: 20rpx 14rpx;
					@include flex();
					flex-direction: column;
					box-sizing: border-box;
				}
				
				&name {
					width: 100%;
					@include flex();
					@include font(24rpx, 1, #333, left);
				}
				
				&desc {
					width: 100%;
					@include flex();
					@include font(24rpx, 1, #333, left);
					margin-top: 20rpx;
				}
				
				&tags {
					display: flex;
					align-items: center;
					margin-top: 64rpx;
				}
			}
		}
		
		&submit {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 11;
			@include size(100%, 120rpx);
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			
			button {
				@include size(100%, 80rpx, 16rpx);
				@include font(28rpx, 80rpx, #fff);
				background: #846BFE;
				
				&.disabled {
					color: #333;
					background: #f5f5f5;
				}
			}
		}
		
		&tips {
			padding: 98rpx 40rpx 0;
			@include size(526rpx, 720rpx);
			box-sizing: border-box;
			
			& > text {
				@include font(32rpx, 50rpx, #150B47, left);
			}
			
			
			& > image {
				@include absolute(-66rpx, null, null, 50%);
				@include size(132rpx, 132rpx);
				margin-left: -66rpx;
			}
			
			&- {
				
				&list {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 22rpx 0;
					
					image,
					text {
						display: block;
					}
					
					image {
						@include size(205rpx, 268rpx);
					}
					
					text {
						padding: 20rpx 0;
						@include font(28rpx, 1, #292955, center);
					}
				}
				
				&submit {
					@include size(240rpx, 76rpx, 16rpx);
					@include font(34rpx, 76rpx, #fff);
					background: #846BFE;
					margin: 0 auto;
				}
			}
		}
	}
}

// 列表
.sp-oa {
	background: #f7f7fc;
	
	&__ {
		
		&type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 132rpx;
			background: #fff;
			
			&-pics {
				position: relative;
				@include size(56rpx, 56rpx);
				margin: 0 auto;
			}
			
			&-badge {
				
				&:after {
					content: '';
					position: absolute;
					top: -4rpx;
					right: -8rpx;
					z-index: 11;
					width: 16rpx;
					height: 16rpx;
					background: #FF4A11;
					border-radius: 50%;
				}
			}
			
			&-item {
				flex: 1;
				height: 100%;
				border-bottom: 3px solid #fff;
				transition: all .3s;
				
				&.active {
					border-color: #b085f9;
				}
				
				image,
				text {
					display: block;
				}
				
				image {
					@include size(56rpx, 56rpx);
					margin: 0 auto;
				}
				
				text {
					@include font(24rpx, 40rpx, #292955);
				}
			}
		}
		
		&content {
			padding: 0 30rpx;
		}
		
		&banner {
			margin: 16rpx auto;
			
			image {
				display: block;
				width: 100%;
				height: 200rpx;
			}
		}
		
		&boxes {
			background: #fff;
			margin-bottom: 16rpx;
			border-radius: 4rpx;
			overflow: hidden;
			
			.u-cell__title-text {
				position: relative;
				padding-left: 24rpx;
				font-size: 28rpx !important;
				
				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 10rpx;
					height: 20rpx;
					background: #b085f9;
					border-radius: 20rpx;
				}
			}
			
			.u-cell__body {
				height: 96rpx;
				line-height: 96rpx;
				padding: 0 30rpx !important;
				font-size: 28rpx !important;
			}
			
			.u-cell__title-text {
				color: #8B8BAD !important;
			}
			
			.u-icon__icon--info {
				font-size: 28rpx;
				color: #55557A !important;
			}
			
			.u-collapse-item__content {
				border-top: 1rpx solid rgba(184, 184, 201, 0.3);;
			}
			
			&- {
				
				&list {
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
				}
				
				&item {
					position: relative;
					flex: 0 0 25%;
					margin: 20rpx 0;
					padding: 20rpx;
					box-sizing: border-box;
					box-shadow: 0 0 5rpx rgba(0, 0, 0, .1);
					
					image,
					text {
						display: block;
					}
					
					image {
						@include size(56rpx, 56rpx);
						margin: 0 auto;
					}
					
					text {
						@include font(24rpx, 60rpx, #292955);
					}
				}
			}
		}
	}
}

// 公共的标题
.sp-title {
	background: #fff;
	
	.u-cell__title-text {
		position: relative;
		padding-left: 24rpx;
		font-size: 28rpx !important;
		
		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 10rpx;
			height: 20rpx;
			background: #b085f9;
			border-radius: 20rpx;
		}
	}
	
	.u-cell__body {
		height: 96rpx;
		line-height: 96rpx;
		padding: 0 30rpx !important;
		font-size: 28rpx !important;
	}
	
	.u-cell__title-text {
		color: #8B8BAD !important;
	}
	
	.u-icon__icon--info {
		font-size: 28rpx;
		color: #55557A !important;
	}
	
}

// 首页
.sp-index {
	
	&__ {
		
		&swiper {
			padding: 0 32rpx;
			
			&- {
				
				&header {
					@include flex(flex-end);
					padding-right: 36rpx;
					
					image {
						display: block;
						@include size(140rpx, 140rpx);
					}
					
					text {
						display: block;
						padding-bottom: 16rpx;
						@include font(36rpx, 60rpx, #333, null, bold);
					}
				}
				
				&nums {
					@include flex();
					@include size(100%, 168rpx, 16rpx);
					background: linear-gradient( 180deg, #795EFF 0%, #907AFD 100%);
					margin: 0 auto;
					box-shadow: 0 10rpx 20rpx rgba(144, 122, 253, .5);
					
					& > view {
						flex: 1;
						color: #fff;
						text-align: center;
						
						label, 
						& > text {
							display: block;
							line-height: 60rpx;
						}
						
						label {
							font-size: 24rpx;
						}
						
						& > text {
							font-size: 36rpx;
							
							text {
								font-size: 24rpx;
								padding-left: 10rpx
							}
						}
					}
				}
			}
		}
		
		&link {
			@include flex(center, space-between, null, wrap);
			gap: 22rpx;
			padding: 24rpx 32rpx;
			
			&- {
				
				&item {
					@include flex(center, flex-start);
					@include size(332rpx, 168rpx, 16rpx);
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.1);
					
					image {
						display: block;
						@include size(90rpx, 90rpx);
						margin: 0 26rpx 0 42rpx;
					}
					
					text {
						font-size: 32rpx;
					}
				}
				
				&empty {
					text-align: center;
					opacity: .5;
					justify-content: center;
				}
			}
		}
	
		&error {
			padding: 0 0 25rpx;
			
			&- {
				
				&item {
					@include flex();
					width: 710rpx;
					padding: 20rpx;
					background: #fff;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
					margin: 20rpx auto 0;
					box-sizing: border-box;
				}
				
				&pics {
					@include flex();
					justify-content: center;
					@include size(60rpx, 60rpx);
					border-radius: 50%;
					background: rgba(255, 0, 0, .1);
				}
				
				&info {
					@include font(28rpx, 1, #292955);
				}
				
				&addr {
					
				}
			}
		}
		
		&datas {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			padding: 25rpx 25rpx 0;
			
			&- {
				
				&item {
					position: relative;
					width: 330rpx;
					background: #fff;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
					border-radius: 15rpx;
					margin-bottom: 25px;
					padding: 20rpx;
					box-sizing: border-box;
					
					&:nth-child(even) {
						margin-left: 20px;
					}
					
					text {
						display: block;
						
						&:nth-child(1) {
							@include font(28rpx, 1, #292955, left);
						}
						
						&:nth-child(2) {
							margin-top: 20rpx;
							@include font(28rpx, 1, #292955, left);
						}
					}
				}
			}
		}
		
		&history {}
		
		&type {
			
			&- {
				
				&title {
					position: relative;
					padding: 60rpx 30rpx 30rpx;
					font-size: 28rpx;
					border-bottom: 1px solid #eee;
					
					&:after {
						content: '';
						position: absolute;
						right: 30rpx;
						top: 55%;
						transform: rotate(45deg);
						width: 16rpx;
						height: 16rpx;
						border: solid #ccc;
						border-width: 2px 2px 0 0;
					}
				}
				
				&list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 75rpx 35rpx;
				}
				
				&item {
					display: flex;
					align-items: center;
					justify-content: center;
					@include size(294rpx, 134rpx, 24rpx);
					background: #F2F4FA;
					
					image {
						display: block;
						@include size(74rpx, 74rpx);
						margin-right: 20rpx;
					}
					
					text {
						font-size: 32rpx;
						color: #333;
					}
				}
			}
		}
	}
}

// 个人中心
.sp-member {
	
	&__ {
		
		&header {
			display: flex;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			margin-bottom: 20rpx;
			padding: 50rpx 30rpx;
			
			&- {
				
				&avatar {
					width: 160rpx;
					height: 160rpx;
					margin-right: 30rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				
				&name {
					
					label,
					text {
						display: block;
					}
					
					label {
						margin-bottom: 20rpx;
						color: #292955;
						font-size: 32rpx;
					}
					
					text {
						color: #55557A;
						font-size: 24rpx;
					}
				}
			}
		}
		
		&submit {
			margin: 400rpx auto 0;
			
			button {
				width: 600rpx;
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 10rpx;
				background: #b085f9;
			}
		}
		
		&menu {
			background: #fff;
		}
	}
}

// 首页的筛选
.sp-filter {
	@include flex();
	height: 56rpx;
	
	&__ {
		
		&date {
			position: relative;
			flex: 1;
			height: 100%;
			border-radius: 16rpx;
			background: rgba(132, 107, 254, 0.08);
			
			image {
				@include size(30rpx, 30rpx);
				@include absolute(50%, null, null, 28rpx);
				margin-top: -15rpx;
			}
			
			text {
				line-height: 54rpx;
				font-size: 26rpx;
				color: #999;
				padding-left: 70rpx;
			}
			
			&- {
				
				&desc {
					color: #999;
				}
				
				&vals {
					color: #333;
				}
			}
		}
		
		&menu {
			@include size(48rpx, 48rpx);
			margin-left: 16rpx;
			
			image {
				display: block;
				@include size(100%, 100%);
			}
		}
	}
}